<!--
 * @Author       : Li Ming Yang
 * @Date         : 2023-11-21 15:01:30
 * @Description  : 资讯组件
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2024-05-06 09:50:17
-->

<template>
  <view class="deco-information" :style="[innerStyle]">
    <view class="font-32 font-bold mb-20">资讯追踪</view>
    <view class="deco-information__list">
      <view v-for="(column, columnIndex) in waterfall" :key="columnIndex" class="deco-information__list__column">
        <view class="flex flex-col">
          <information-item v-for="item in column" :key="item.informationId" :data="item"></information-item>
        </view>
      </view>
    </view>
    <zm-loading :show="loading">正在加载...</zm-loading>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import InformationItem from "./components/information-item/information-item"
export default {
  name: "deco-information",
  components: { InformationItem },
  mixins: [mixin],
  data() {
    return {
      list: [],
      page: 1,
      count: 20,
      pageSize: 15,
      loading: false
    }
  },
  computed: {
    waterfall() {
      const result = []
      for (let i = 0; i < 2; i++) result.push([])
      let index = 0
      for (let i = 0; i < this.list?.length; i++) {
        result[index].push(this.list[i])
        index = (index + 1) % 2
      }
      return result
    }
  },
  mounted() {
    this.init()
    this.handleRefreshList()
  },
  methods: {
    init() {
      if (this.mitt) {
        this.mitt.on("refresh", () => {
          this.handleRefreshList()
        })
        this.mitt.on("onReachBottom", () => {
          this.handleLoadList()
        })
      }
    },
    async handleLoadList() {
      if (this.list?.length >= this.count) return
      this.loading = true
      const { count, list } = await uni.$api.information.getList({ page: this.page, pageSize: this.pageSize })
      this.list = [...this.list, ...list]
      this.count = count
      this.page++
      this.loading = false
    },
    async handleRefreshList() {
      this.page = 1
      const { count, list } = await uni.$api.information.getList({ page: this.page, pageSize: this.pageSize })
      this.list = list
      this.count = count
      this.page++
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-information {
  &__list {
    display: grid;
    column-gap: 22rpx;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    &__column {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
